<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>我的</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{height:100%;}
	
	/*-- 顶部内容 --*/
	.top_box{position:relative;}
	.top_box>img{width:100%;}
	
	.top_title{position:absolute;top:0;left:0;width:100%;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;margin-right:calc(50% - 52px);}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}

	.anquan_tuichu{float:left;display:block;margin:17px 17px 17px calc(50% - 65px);height:18px;line-height:18px;font-size:12px;color:#fff;width:48px;}
	
		/* 头像昵称等 */
	.top_center{height:110px;position:absolute;top:52px;width:100%;}
	.top_center>div{float:left;width:60px;height:60px;border:4px solid rgba(255,255,255,.5);border-radius:50%;overflow:hidden;margin:16px 21px;}
	.top_center>div>img{width:100%;}
	.top_center>ul{float:left;color:#fff;width:calc(100% - 120px);}
	.top_center>ul>li:nth-of-type(1){line-height:30px;font-size:16px;}
	.top_center>ul>li:nth-of-type(2){font-size:12px;line-height:40px;}
	.top_center>ul>li:nth-of-type(2)>p{float:left;width:50px;}
	
	.jindutiao{
		float:left;width:182px;height:12px;border-radius:8px;padding:2px;margin:12px 0;
		background-image: -moz-linear-gradient( 90deg, rgb(147,89,207) 0%, rgb(100,63,195) 99%);
		background-image: -webkit-linear-gradient( 90deg, rgb(147,89,207) 0%, rgb(100,63,195) 99%);
		background-image: -ms-linear-gradient( 90deg, rgb(147,89,207) 0%, rgb(100,63,195) 99%);
	}
	.jindutiao>div{width:180px;height:10px;border:1px solid #5230b0;border-radius:6px;
		background-image: -moz-linear-gradient( 90deg, rgb(66,32,157) 0%, rgb(50,23,146) 99%);
		background-image: -webkit-linear-gradient( 90deg, rgb(66,32,157) 0%, rgb(50,23,146) 99%);
		background-image: -ms-linear-gradient( 90deg, rgb(66,32,157) 0%, rgb(50,23,146) 99%);
	}
	.jindutiao>div>div{background:url(__HOME__/img/jindutiao.jpg) no-repeat;width:80%;height:10px;border-radius:5px;background-position-X:-20px;animation:jdt .5s linear infinite;}
	@keyframes jdt{
		form{background-position-X:-20px;}
		to{background-position-X:-8px;}
	}
	.top_center>ul>li:nth-of-type(3){line-height:30px;font-size:14px;}
	.top_center>ul>li:nth-of-type(3)>span{color:#ff5c5c;}
		/* 头像昵称等 */
	
	.top_cont{position:absolute;left:20px;bottom:-40px;width:calc(100% - 40px);background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);font-size:12px;border-radius:10px;}
	.top_cont>div:nth-of-type(1){float:left;width:calc(50% - 21px);border-right:1px solid #eee;margin:10px 0 10px 10px;padding-right:10px;line-height:32px;}
	.top_cont>div:nth-of-type(2){float:left;width:calc(50% - 20px);margin:10px;line-height:32px;}
	.top_cont>div>div{height:20px;width:20px;background:url(__HOME__/img/tubiao_03.png) no-repeat;background-size:100px 100px;float:left;margin:6px 6px 6px 0;}
	.top_cont>div>p:nth-of-type(1){float:left;width:calc(50% - 13px);color:#666;}
	.top_cont>div>p:nth-of-type(2){float:left;width:calc(50% - 13px);text-align:right;}
	
	.top_cont>p{text-align:center;height:18px;line-height:18px;margin:0 auto 10px;width:140px;border-radius:9px;background-color:#87c1f5;color:#fff;}
	/*-- 顶部内容 --*/
	/*-- 活动兑换 --*/
	.hddh_box{background-color:#f2f2f2;padding-top:50px;}
	.hddh_box>div{background-color:#fff;padding:0 20px;line-height:40px;border-bottom:1px solid #eee;}
	.hddh_box>div>div{float:left;background:url(__HOME__/img/tubiao_03.png) no-repeat;background-size:100px 100px;background-position-Y:-50px;height:20px;width:20px;margin:10px 0;}
	.hddh_box>div>p{width:calc(100% - 20px);text-indent:10px;float:left;}
	.hddh_box>ul{background-color:#fff;overflow:auto;}
	.hddh_box>ul>li{float:left;width:90px;font-size:12px;padding:10px 0;}
	.hddh_box>ul>li>div{background:url(__HOME__/img/tubiao_03.png) no-repeat;width:30px;height:30px;margin:0 auto;background-size:100px 100px;background-position-Y:-20px;}
	.hddh_box>ul>li>p{text-align:center;height:24px;color:#999;}
	/*-- 活动兑换 --*/
	/*-- 其余几项 --*/
	.qiyujx_box{background-color:#f2f2f2;padding:20px 0 68px;}
	.qiyujx_box>ul{line-height:40px;padding:0 20px;background-color:#fff;}
	.qiyujx_box>ul>li{border-bottom:1px solid #f2f2f2;color:#4d4d4d;font-size:14px;}
	.qiyujx_box>ul>li>div:nth-of-type(1){
		float:left;width:20px;height:20px;margin:10px 0;background:url(__HOME__/img/tubiao_03.png) no-repeat;
		background-size:100px 100px;background-position-Y:-50px;
	}
	.qiyujx_box>ul>li>p{float:left;width:calc(100% - 28px);text-indent:10px;}
	.qiyujx_box>ul>li>div:nth-of-type(2){float:left;width:8px;height:8px;margin:16px 0;}
	.qiyujx_box>ul>li>div:nth-of-type(2) >div{height:6px;width:6px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(-45deg)}
	/*-- 其余几项 --*/
</style>
</head>

<body>
	<!-- 顶部内容 -->
	<div class="top_box">
		<img src="__HOME__/img/my_topimg.jpg" alt="">
		<div class="top_title">
			<a href="{:url('index')}" class="fanhui"><div></div></a>
			<a href="{:url('login/saveout')}" class="anquan_tuichu">安全退出</a>
		</div>
		<div class="top_center">
			<div><img src="__HOME__/img/touxiang.png" alt=""></div>
			<ul>
				<li>{$info['username']}</li>
				<li>
					<p>成长值：</p>
					<div class="jindutiao"><div><div></div></div></div>
					<h6 class="clearfix"></h6>
				</li>
				<li>绑定手机：<span>{$info['mobile']}</span></li>
			</ul>
			<h6 class="clearfix"></h6>
		</div>
		<div class="top_cont">
			<div>
				<div></div>
				<p>红包余额:</p>
				<p style="color:#fcac45;">¥<span>{$info['redpackbalance']}</span></p>
				<h6 class="clearfix"></h6>
			</div>
			<div>
				<div></div>
				<p>我的积分:</p>
				<p style="color:#fc6c45;">{$info['score']}</p>
				<h6 class="clearfix"></h6>
			</div>
			<h6 class="clearfix"></h6>
			<p>已累计节省：<span>0</span>元</p>
		</div>
	</div>
	<!-- 顶部内容 -->
	<!-- 活动兑换 -->
	<div class="hddh_box">
		<div>
			<div></div>
			<p>活动兑换</p>
			<h6 class="clearfix"></h6>
		</div>
		<ul>
			{foreach $active as $k => $v}
			<li onClick="location.href='/index/index/actinfo?id={$v.id}'">
				<div></div>
				<p>{$v['title']}</p>
			</li>
			{/foreach}
			<li>
				<div style="background-position-X:-{:count($active)*30}px;"></div>
				<p></p>
			</li>
			<h6 class="clearfix"></h6>
		</ul>
	</div>
	<!-- 活动兑换 -->
	<!-- 其余几项 -->
	<div class="qiyujx_box">
		<ul>
			<li onClick="location.href='{:url('spend')}'">
				<div style="background-position-X:-20px"></div>
				<p>消费明细</p>
				<div><div></div></div>
				<h6 class="clearfix"></h6>
			</li>
			<li onClick="location.href='{:url('coupon')}'">
				<div style="background-position-X:-40px"></div>
				<p>我的卡券</p>
				<div><div></div></div>
				<h6 class="clearfix"></h6>
			</li>
			<li onClick="location.href='{:url('bindmobile')}'">
				<div style="background-position-X:-60px"></div>
				<p>绑定手机号</p>
				<div><div></div></div>
				<h6 class="clearfix"></h6>
			</li>
			<li onClick="location.href='{:url('aboutus')}'">
				<div style="background-position-X:-80px"></div>
				<p>关于我们</p>
				<div><div></div></div>
				<h6 class="clearfix"></h6>
			</li>
		</ul>
	</div>
	<!-- 其余几项 -->
	
	<!-- 底部按钮区 -->
	<div class="footer">
		<div onClick="location.href='{:url('index')}'">
			<div><div style="background-position-X:-24px"></div></div>
			<p>首页</p>
		</div>
		<div onClick="location.href='{:url('shop')}'">
			<div><div></div></div>
			<p>商家</p>
		</div>

		<div id="saoyisao" onclick="location.href='/index/index/scan.html'">
			<div><div></div></div>
			<p>扫一扫</p>
		</div>
		<div onClick="location.href='{:url('seller')}'">
			<div><div style="background-position-X:-48px"></div></div>
			<p>商家入驻</p>
		</div>
		<div>
			<div><div style="background-position:-72px -24px"></div></div>
			<p>我的</p>
		</div>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 底部按钮区 -->
</body>
<!-- <script src="__HOME__/js/jquery-3.3.1.js"></script>-->
<script>
	
</script>
</html>
